<template>
  <div id="classInfo">
    <box-border title-button="课程信息" />
    <div class="classInfo-header">
      <el-card>
        <div class="classInfo-header-card">
          <div class="classInfo-header-card-img">
            <img :src="classInfo.class_img" alt="" srcset="">
          </div>
          <div class="classInfo-header-card-text">
            <div class="classInfo-header-card-text-className">
              <span>{{ classInfo.class_name }}</span>&nbsp;  &nbsp;
              <span style="font-size:28px">课时数：{{ classInfo.class_number }}</span>
            </div>
            <div class="classInfo-header-card-text-classTime">
              <span>开课时间：{{ classInfo.startTime }}</span>&nbsp;  &nbsp;
              <span>已经有{{ classInfo.hot }}人参与</span>
            </div>
            <div class="classInfo-header-card-text-buy">
              <span>
                <el-button type="warning" round @click="showDialogForm">购买课程</el-button>
              </span>
              <span v-if="!isCollect" @click="collectClass(false)"><svg t="1651479257077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2203" width="36" height="36"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#dbdbdb" p-id="2204" /></svg></span>
              <span v-else @click="collectClass(true)"><svg t="1651479257077" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2203" width="36" height="36"><path d="M512 901.746939c-13.583673 0-26.122449-4.179592-37.093878-13.061225-8.881633-7.314286-225.697959-175.020408-312.424489-311.379592C133.746939 532.37551 94.040816 471.24898 94.040816 384.522449c0-144.718367 108.146939-262.269388 240.326531-262.269388 67.395918 0 131.657143 30.82449 177.632653 84.636735 45.453061-54.334694 109.191837-84.636735 177.110204-84.636735 132.702041 0 240.326531 117.55102 240.326531 262.269388 0 85.159184-37.093878 143.673469-67.395919 191.216327l-1.044898 1.567346c-86.726531 136.359184-303.542857 304.587755-312.424489 311.379592-10.44898 8.359184-22.987755 13.061224-36.571429 13.061225z" fill="#d81e06" p-id="2204" /></svg></span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
    <div class="classInfo-center">
      <el-card>
        <div slot="header" style="font-size:20px">
          <div>课程详情</div>
          <hr>
        </div>
        <div class="classInfo-center-swiper">
          <el-carousel :interval="4000" type="card" height="300px">
            <el-carousel-item v-for="item in classInfo.class_images" :key="item.class_id">
              <img :src="item.url" alt="" style="width:100%;height:100%">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div class="classInfo-center-text">
          <span>
            &nbsp;  &nbsp; &nbsp;{{ classInfo.content }}
          </span>
        </div>
      </el-card>
    </div>
    <DialogForm :is-show-dialog-form="isShowDialogForm" @changeDialogForm="changeDialogForm" />
  </div>
</template>

<script>
import DialogForm from './Dialog'
import dayjs from 'dayjs'
export default {
  components: {
    DialogForm
  },
  data() {
    return {
      count: 1,
      searchTeacherForm: {
        name: 2
      },
      isShowDialogForm: false,
      classId: '',
      isCollect: false,
      classInfo: {}
    }
  },
  created() {
    this.classId = this.$route.query.classId
  },
  mounted() {
    this.getClassInfo()
  },
  destroyed() {
    this.$bus.$emit('getClassId', this.classId)
  },
  methods: {
    // 展示DialogForm
    showDialogForm() {
      this.isShowDialogForm = true
    },
    // 确认取消
    changeDialogForm(data) {
      this.isShowDialogForm = data
    },
    // 收藏
    async collectClass(bool) {
      this.isCollect = !bool
      if (!bool) {
        // 收藏
        await this.$API.classAPI.collectClass(this.classId)
      } else {
        // 取消
        await this.$API.classAPI.cancelCollectClass(this.classId)
      }
    },
    // 获得课程详情
    async getClassInfo() {
      const result = await this.$API.classAPI.getClassInfo(this.classId)
      result.data.startTime = dayjs(result.data.start_time).format('YYYY-MM-DD')
      this.classInfo = result.data
      this.isCollect = result.data.collects[0].collect !== '0'
    }
  }
}
</script>

<style lang="scss" scoped>
.classInfo{

    }
.classInfo-header{
    margin-top:80px;
    background-color: rgb(255, 255, 255);
    &-card{
        width: 100%;
        height: 320px;
        display:flex;
        align-items: center;
        padding: 0 20px;
        &-img{
            img{
                width: 400px;
                height: 300px;
            }
        }
        &-text{
            margin: 0 50px;
            &-className{
                font-size: 36px;
                font-weight: 600;
            }
            &-classTime{
                background-color: #fff;
                color: rgb(163, 163, 163);
                margin: 20px 0;
                font-size: 20px;
            }
            &-buy{
                margin-top:10px;
                // text-align: center;
                display: inline-flex;
                align-items: center;
            }
        }
    }
}
.classInfo-center{
    margin-top:20px;
    &-swiper{
        margin:30px 40px;
    }
    &-text{
        margin: 10px 20px;
        font-size: 16px;
    }
}
 .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
</style>
